<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>猜数字游戏</h1>
<p>
我刚才随机选定了一个100以内的自然数。看你能否在 10
次以内猜中它。每次我都会告诉你所猜的结果是高了还是低了。
</p>
<div class="form">
<label for="guessField">请猜数: </label>
<!-- 猜测的数字  -->
<input type="text" id="guessField" class="guessField" />
<input type="submit" value="确定" class="guessSubmit" />
</div>
<!-- 结果区域 -->
<div class="resultParas">
<p class="guesses"></p>
<p class="lastResult"></p>
<p class="lowOrHi"></p>
</div>
</body>
<script>
    // 随机数
    let randomNumber = Math.floor(Math.random() * 100) + 1;
    // 定位
    const guesses = document.querySelector('.guesses');
    const lastResult = document.querySelector('.lastResult');
    const lowOrHi = document.querySelector('.lowOrHi');
    const guessSubmit = document.querySelector('.guessSubmit');
    const guessField = document.querySelector('.guessField');
    let guessCount = 1;
    let resetButton;

    function checkGuess() {
        // 获取值
        let userGuess = Number(guessField.value);

        if (guessCount === 1) {
            guesses.textContent = '上次猜的数：';
        }
        guesses.textContent += userGuess + ' ';
        if (userGuess === randomNumber) {
            lastResult.textContent = '恭喜你！猜对了';
            lastResult.style.backgroundColor = 'green';
            lowOrHi.textContent = '';
            setGameOver();
        }else if (guessCount==10){
            lastResult.textContent='游戏结束';
            setGameOver();
        }else{
            lastResult.textContent='你猜错了！';
            lastResult.style.backgroundColor='red';
            if (userGuess<randomNumber){
                lowOrHi.textContent='你猜低了！';
            }else if(userGuess>randomNumber){
                lowOrHi.textContent='你猜高了！';
            }
        }
        guessCount++;
        guessField.focus();
        guessField.value='';
}

// 添加事件
guessSubmit.addEventListener('click', checkGuess);

function resetGame() {
    guessCount = 1;
    // 结果区域
    const resetParas = document.querySelectorAll('.resultParas p');
    for (let i = 0; i < resetParas.length; i++) {
        // 将结果区域全部设为空
        resetParas[i].textContent = '';
    }
    resetButton.parentNode.removeChild(resetButton);
    guessField.disabled = false;
    guessSubmit.disabled = false;
    guessField.value = '';
    guessField.focus();
    lastResult.style.backgroundColor = 'white';
    randomNumber = Math.floor(Math.random() * 100) + 1;
}

function setGameOver() {
    guessField.disabled = true;
    guessSubmit.disabled = true;
    resetButton = document.createElement('button');
    resetButton.textContent="开始新游戏";
    document.body.appendChild(resetButton);
    resetButton.addEventListener('click',resetGame);
}
</script>

</html>
